<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1574064_8y1mhtxrjiq.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1574448_vfkj146as1r.css">
    <link rel="stylesheet" href="../css/personpage.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"> </script>
</head>

<body>
    <div class="container">
        <!--头部 start-->
        <div class="head-box">
            <div class="top">
                <span class="iconfont icon-make"></span>
                <span class="iconfont icon-scan"></span>
                <span class="iconfont icon-newmessage"></span>
            </div>
            <div class="center">
                <ul>
                    <li class="first">
                        <span class="iconfont icon-headmagic"></span>
                        <p class="login">登录/注册</p>
                        <p class="diteal">登录享受更多优惠及服务</p>
                    </li>
                    <li class="second">
                        <span class="iconfont icon-signin"></span>
                        <p class="everyday">签到</p>
                    </li>
                </ul>
            </div>
            <div class="low">
                <ul>
                    <li>
                        <p>0<br>代金券 |</br></p>
                    </li>
                    <li>
                        <p>0<br>收藏 |</br></p>
                    </li>
                    <li>
                        <p>0<br>足迹 |</br></p>
                    </li>
                    <li>
                        <span class="iconfont icon-daysmessage"></span>
                        <p>常用信息</p>
                    </li>
                </ul>

            </div>
        </div>
        <!--头部 end-->
        <!--我的订单 start-->
        <div class="tabup-box">
            <p>
                <span class="myorder">
                    我的订单
                </span>
                <span class="order">
                    查看全部订单>
                </span>
            </p>
            <ul>
                <!-- <p>我的订单</p> -->
                <li>
                    <span class="iconfont icon-underpay"></span>
                    <p>待付款</p>
                </li>
                <li>
                    <span class="iconfont icon-underwalk"></span>
                    <p>待出行</p>
                </li>
                <li>
                    <span class="iconfont icon-underwrite"></span>
                    <p>待点评</p>
                </li>
                <li>
                    <span class="iconfont icon-refuseorder"></span>
                    <p>退款单</p>
                </li>
            </ul>
        </div>
        <!--我的订单 end-->
        <!--我的钱包 start-->
        <div class="tabcentre-box">
            <p>
                <span class="mypurse">
                    我的钱包
                </span>
                <span class="purse">
                    余额、银行卡等>
                </span>
            </p>
            <ul>
                <li>
                    <span class="iconfont icon-cart"></span>
                    <p class="title">
                        闪游卡
                    </p>
                    <p class="dom">
                        能赚会花
                    </p>
                </li>
                <li>
                    <span class="iconfont icon-spendmoney"></span>
                    <p class="title">
                        拿去花
                    </p>
                    <p class="dom">
                        先出行后付款
                    </p>
                </li>
                <li>
                    <span class="iconfont icon-borrowmoney"></span>
                    <p class="title">
                        借去花
                    </p>
                    <p class="dom">
                        最高二十万
                    </p>
                </li>
                <li>
                    <span class="iconfont icon-applycart"></span>
                    <p class="title">
                        我要办卡
                    </p>
                    <p class="dom">
                        最高50万额度
                    </p>
                </li>
            </ul>
        </div>
        <!--我的钱包 end-->
        <!--应用社区 end-->
        <div class="tabbelow-box">
            <!-- <span>
                <h class="dingdan">我的订单</h>
          <em class="gege">查看全部订单></em>
            </span> -->
            <ul>
                <li>
                    <span class="iconfont icon-myworks"></span>
                    <p>我的作品</p>
                </li>
                <li>
                    <span class="iconfont icon-ridicule"></span>
                    <p>我要吐槽</p>
                </li>
                <li>
                    <span class="iconfont icon-vacationthrought"></span>
                    <p>我的游记</p>
                </li>
                <li>
                    <span class="iconfont icon-killproblem"></span>
                    <p>有问必答</p>
                </li>
                <li>
                    <span class="iconfont icon-rewards"></span>
                    <p>积分商城</p>
                </li>
                <li>
                    <span class="iconfont icon-vacationtrace"></span>
                    <p>我的旅程</p>
                </li>
                <li>
                    <span class="iconfont icon-paycode"></span>
                    <p>付款码</p>
                </li>
                <li>
                    <span class="iconfont icon-studentplace"></span>
                    <p>学生专区</p>
                </li>
                <li>
                    <span class="iconfont icon-vipcenter"></span>
                    <p>会员中心</p>
                </li>
                <li>
                    <span class="iconfont icon-asksurvey"></span>
                    <p>用户调研</p>
                </li>
            </ul>
        </div>
        <!--应用社区 end-->

        <!--这是一个底部导航（tab-bar）的 start-->
        <div class="tab-bar">
            <ul>
                <li>
                    <span class="iconfont icon-home"  v-on:click="openindex"></span>
                    <p>首页</p>
                </li>
                <li>
                    <span class="iconfont icon-order"></span>
                    <p>订单</p>
                </li>
                <li>
                    <span class="iconfont icon-destination" v-on:click="openscenic"></span>
                    <p>附近</p>
                </li>
                <li>
                    <span class="iconfont icon-my"  v-on:click="openPersonpage" v-bind:style="{'color':'red'}"></span>
                    <p v-bind:style="{'color':'red'}">我的</p>
                </li>
            </ul>
        </div>
        <!--这是一个底部导航（tab-bar）的 end-->
    </div>
</body>
<script>
    var vm = new Vue({
        el: ".container",
        data: {
            value: "",
            value1: 0,
            color:false,
            option: [
                { text: '泉州', value: 0 },
                { text: '福州', value: 1 },
                { text: '厦门', value: 2 }
            ],
        },
        methods: {
            onSearch: function () { },
            openindex:function(){
                window.location.href="../index.html";
            },
            openscenic:function(){
                window.location.href="scenic.html";
            },
            openPersonpage:function(){
                window.location.href="personpage.html";
            }
        },
    })
</script>
</html>